<style lang="scss" scoped>
.set_manage {
    .btns_wrap {
        margin-bottom: 20px;
    }
}
</style>

<template>
    <div class="set_manage">
        <div class="btns_wrap">
            <el-button @click="showModal('add')" type="primary">新增</el-button>
        </div>
        <div class="table_wrap">
            <common-table 
                :columns="columns" 
                v-bind="pageData"
                @page-change="pageChange"
            />
        </div>
        <add-setting-modal 
            v-model:show="showAddModal"
            :type="optType"
            :curForm="curForm"
            :title="optType === 'add' ? '新增配置' : '修改配置'"
            @success="handleSubmit"
        />
    </div>
</template>

<script setup>
import { ref, onMounted, h } from 'vue'
import CommonTable from "@/components/commonTable/index.vue";
import AddSettingModal from '@/views/SystemSetting/component/AddSettingModal.vue'
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { QuerySetting, DelSetting } from "@/apis/system.js";
import CommonStatus from '@/components/commonStatus.vue'
import { ElMessage } from "element-plus";
import usePage from '@/hooks/usePage'
import { RoleStatusMap } from "@/enums/index";
const { pageData, handleQuery, pageChange } = usePage(QuerySetting, 'records')
const showAddModal = ref(false)
const optType = ref('add')
const curForm = ref('')
const showModal = (type, data) => {
    optType.value = type
    showAddModal.value = true
    curForm.value = data
}
const columns = [
    {
        prop: "id",
        label: "标题",
        minWidth: 100,
        align: "center",
    },
    {
        prop: "rname",
        label: "名称",
        minWidth: 120,
        align: "center",
    },
    {
        prop: "description",
        label: "类型",
        minWidth: 120,
        align: "center",
    },
    {
        prop: "state",
        label: "状态",
        width: 120,
        align: "center",
        render: (row) => {
            return h(CommonStatus, { ...(RoleStatusMap[row.state] || {}) });
        },
    },
    {
        label: "操作",
        width: 150,
        align: "center",
        render: (row, column, $index) => {
            return h(CommonOptionBtns, {
                btnList: [
                    {
                        type: "primary",
                        size: "small",
                        text: "编辑",
                        eventName: "edit",
                    },
                    {
                        type: "info",
                        size: "small",
                        text: "删除",
                        eventName: "del",
                        prop: { title: "确认删除该配置?" },
                    },
                ],
                onBtnClick: (eventName) => {
                    if (eventName === "edit") {
                        // 编辑
                        showModal("edit", row);
                    }
                    if (eventName === "del") {
                        console.log("eventName: ", eventName);
                        DelSetting(row.id).then(() => {
                            ElMessage({
                                message: "删除成功",
                                type: "success",
                            });
                            handleQuery();
                        });
                    }
                },
            });
        },
    },
];
onMounted(() => {
    handleQuery()
})
</script>
